<template>
  <div>
    <proposer></proposer>
    <div class="header">
      <img src="@/assets/img/rongyu.jpg"
           alt="">
    </div>
    <!-- 登录 -->
    <div class="form">
      <van-form @submit="onSubmit">
        <van-field v-model="form.name"
                   name="name"
                   label="姓名"
                   placeholder="请填写您的姓名"
                   :rules="[{required: true, message: '你的姓名为空'},{pattern:/^[\u4e00-\u9fa5]{2,6}$/,message:'你的姓名格式错误'}]">
        </van-field>
        <van-field v-model="form.email"
                   name="email"
                   label="邮箱"
                   placeholder="请填写您的邮箱"
                   :rules="[{required: true, message: '你的邮箱为空'},{ pattern:/^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/, message: '你的邮箱格式错误' }]" />
        <van-field v-model="form.phone"
                   name="phone"
                   label="电话号码"
                   placeholder="请填写您的电话号码"
                   :rules="[{required:true,message:'你电话号码为空'},{ pattern:/^1[3|4|5|8][0-9]\d{4,8}$/, message:'您的电话号码格式错误' }]" />
        <div style="margin: 16px;">
          <van-button round
                      block
                      type="info"
                      native-type="submit">登录</van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>
<script>
import Cookies from 'js-cookie'
import proposer from '@/components/proposer'
export default {
  data () {
    return {
      form: {
        name: '',
        email: '',
        phone: ''
      },
    }
  },
  methods: {
    onSubmit (values) {
      // 设置cookie以及实现json对象字符串之间的互转
      JSON.stringify(values)
      Cookies.set("value", JSON.stringify(values));
      Cookies.get('value');
      console.log(JSON.parse(Cookies.get('value')))
    },
  },
  mounted () {
  },
  components: {
    proposer
  }
}
</script>

<style scoped>
.from {
  width: 100%;
}
.header {
  height: 255px;
}
.header img {
  width: 100%;
  height: 100%;
}
</style>